<template>
	<view :style="{ '--color': color }">
		<u-popup :show="true" @close="close" mode="bottom" :round="10" closeable>
			<view class="Wrapper">
				<view class="head">选择收货地址</view>
				<view class="content">
					<!-- <view class="Wechat" @click="chooseAddress">
						<view class="d-flex a-center">
							<view class="iconfont icon-weixin color_wechat size44"></view>
							<text class="wechat_address">获取微信收货地址</text>
						</view>
						<view class="iconfont icon-xiangyouxiayiye color_99 h6"></view>
					</view> -->

					<view class="List" v-for="(item, index) in pageData" :key="item.id" @click="ToggleAddress(item.id)">
						<view class="List_icon" :class="{ Active: item.id == Address.id }">
							<text class="icon-xuanzhong iconfont size28"></text>
						</view>
						<view class="List_box">
							<text class="List_box_address">{{ item.Aregion }}{{ item.Aaddress }}</text>
							<view class="List_box_info">
								<view class="downtown_More" v-if="item.is_default == 1">默认</view>
								<text class="infoTxt">{{ item.Aname }}</text>
								<text class="infoTxt">{{ item.Amobile }}</text>
							</view>
						</view>
						<view class="iconfont icon-bianji color_99 size36" @click.stop="EditAddress(item)"></view>
					</view>

					<emptys empty="address" v-if="!pageData.length"></emptys>
				</view>
				<view class="footer">
					<view class="newCreat" @click="newAdd">新增地址</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	props: ['Address'],
	data() {
		return {
			pageData: []
		};
	},
	created() {
		this.getAddress();
	},
	methods: {
		getAddress() {
			this.$showLoading('');
			this.$http
				.post({
					url: '/zzj_singleSaleApi/getAddress'
				})
				.then((res) => {
					this.$hideLoading();
					if (res.code != '100') return this.$Toast(res.msg);
					const result = res.data || [];
					this.pageData = result;
				});
		},
		ToggleAddress(id) {
			this.$http
				.get({
					url: '/zzj_singleSaleApi/saveDefaultAddress',
					data: {
						id
					}
				})
				.then((res) => {
					if (res.code != 100) return this.$Toast(res.msg);
					this.$emit('Update');
					this.close();
				});
		},
		EditAddress(item) {
			this.toUrl(`/orderPage/Addresslist/editAddress?id=${item.id}&bid=${item.bid}&type=2`);
			this.close();
		},
		async chooseAddress() {
			const addressResult = await this.$pop.chooseAddress();
			if (addressResult) this.getAddress();
		},
		newAdd() {
			this.toUrl(`/orderPage/Addresslist/editAddress?type=1`);
			this.close();
		},
		close() {
			this.$emit('close');
		}
	},
	watch: {
		Address: {
			immediate: true,
			handler(newVal) {
				if (newVal) this.getAddress();
			}
		}
	},
	computed: {
		...mapState(['color'])
	}
};
</script>

<style lang="scss" scoped>
@mixin Fleac {
	display: flex;
	justify-content: center;
	align-items: center;
}

.Wrapper {
	width: 100%;

	.head {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 30rpx 0 30rpx;
		color: #000;
		font-size: 34rpx;
	}

	.content {
		width: 100%;
		background-color: #f7f8fa;
		height: 800rpx;
		padding: 24rpx;
		overflow-y: scroll;

		.Wechat {
			width: 100%;
			height: 86rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			display: flex;
			padding: 0 24rpx;
			justify-content: space-between;
			align-items: center;

			.wechat_address {
				color: #343434;
				font-size: 28rpx;
				margin-left: 16rpx;
			}
		}

		.List {
			width: 100%;
			padding: 24rpx 0 24rpx 24rpx;
			background-color: #ffffff;
			margin-top: 24rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;

			&_icon {
				width: 36rpx;
				height: 36rpx;
				border: 1px solid #ccc;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.Active {
				background-color: var(--color);
				border: 1px solid var(--color) !important;
			}

			&_box {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 10rpx 0 24rpx;

				&_address {
					color: #000;
					font-size: 30rpx;
				}

				&_info {
					display: flex;
					align-items: center;
					margin-top: 16rpx;

					.downtown_More {
						background-color: var(--color);
						color: #ffffff;
						font-size: 20rpx;
						padding: 0 10rpx;
						border-radius: 20rpx;
						margin-right: 10rpx;
					}

					.infoTxt {
						color: #999;
						font-size: 28rpx;
						margin-right: 10rpx;
					}
				}
			}

			.icon-bianji {
				padding: 24rpx;
			}
		}
	}

	.footer {
		width: 100%;
		height: 100rpx;
		@include Fleac;

		.newCreat {
			@include Fleac;
			width: 600rpx;
			height: 70rpx;
			background-color: var(--color);
			border-radius: 35rpx;
			color: #ffffff;
			font-size: 32rpx;
		}
	}
}
</style>